<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>商户登记</title>
    <link rel="stylesheet" href="../../fonts/font_awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <link rel="stylesheet" href="../../css/mechant.css">
    <style>
        #pmt{
            color: #2D8CF0;
            font-size:16px;
        }
        .mui-popover {
            height: 100px;
        }
        .fixedbtn{
            position: fixed;
            right:20px;
            bottom:20px;
            z-index:1111;
            width:40px;
            height: 40px;
            line-height: 40px;
            background: #2D8CF0;
            text-align: center;
            border-radius: 50%;
        }
        .fixedbtn a{
            border-radius: 50%;
            width:40px;
            height:40px;
            color: #fff;
            padding:0;margin:0;
            font-size:16px;
            display: block;
            text-align: center;
        }
        .fixedbtn .fa{
            position: relative;
            top:10px;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a id="backBtn" class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
    <!--业绩-->
    <a id="prevBtn2" class="mui-icon mui-icon-back mui-pull-left"></a>
    <!--详情-->
    <a id="prevBtn3" class="mui-icon mui-icon-back mui-pull-left"></a>
    <h1 class="mui-title"></h1>
    <button id="pmt__iconbtn" type="button" class="mui-btn  mui-btn-link mui-btn-nav mui-pull-right">
        <span class="fa fa-search"></span>
    </button>
</header>
<!--搜索-->
<div class="mui-content" id="slist">
    <div class="mui-input-row mui-search" style="margin:10px 10px 0;">
        <input onkeyup="search()" id="key" type="search" class="mui-input-clear" placeholder="">
    </div>
    <div class="service detail__list">
        <ul class="mui-table-view">
            <!--加载搜索数据-->
        </ul>
    </div>
</div>

<!--类别1-->
<div id="segmentedControlbox" >
    <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
        <a tag="1" class="mui-control-item mui-active" href="#item0">POS登记列表</a>
        <a tag="2" class="mui-control-item" href="#item1">大POS申请记录</a>
    </div>
</div>
<div class="filter">
    <div class="filter__text">
        <div class="mui-row">
            <div class="mui-col-xs-10">
                数量：<span id="count">2</span>
            </div>
            <div class="mui-col-xs-2 mui-text-right" id="pmt">
                <span class="fa fa-question-circle-o"></span>
            </div>
        </div>
    </div>
</div>

<!--商户列表-->
<div id="pullrefresh1" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <ul class="mui-table-view" style="background: #EFEFF4">
           <!-- <li class="mui-table-view-cell">
                <div class="mui-slider-right mui-disabled">
                    <a class="mui-btn mui-btn-grey mui-icon mui-icon-person"></a>
                    <a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone"></a>
                    <a class="mui-btn mui-btn-red mui-icon mui-icon-email"></a>
                </div>
                <div class="mui-slider-handle">
                    左右滑动均可显示多功能菜单
                </div>
            </li>-->
        </ul>
    </div>
</div>

<!--交易记录-->
<div id="list" class="mui-content" style="display: none">
    <div class="service detail__list">
        <div class="prompt">
            注意：交易数据保留一个月+15天内，如有任何问题请联系客服，我们查询核对后回复
        </div>
        <ul class="mui-table-view">
            <!--<li class="mui-table-view-cell">2019-09-09 <span class="pull-right">100.90</span></li>-->
        </ul>
    </div>
</div>

<!--交易详情-->
<div id="detail" class="mui-content" style="display: none;">
    <div class="service detail__list">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">PSAM卡号 <span class="pull-right">20199900099</span></li>
            <li class="mui-table-view-cell">交易类型 <span class="pull-right">闪付</span></li>
            <li class="mui-table-view-cell">交易流水号<span class="pull-right">5656556</span></li>
            <li class="mui-table-view-cell">交易日期<span class="pull-right">2019-09-09</span></li>
            <li class="mui-table-view-cell">交易时间<span class="pull-right">11:12</span></li>
            <li class="mui-table-view-cell">交易金额<span class="pull-right">76000.00</span></li>
            <li class="mui-table-view-cell">手续费金额<span class="pull-right">31</span></li>
            <li class="mui-table-view-cell">服务费<span class="pull-right">2019-01-01</span></li>
            <li class="mui-table-view-cell">银行卡号<span class="pull-right">6233****23232323</span></li>
            <li class="mui-table-view-cell">手机号码<span class="pull-right">130****1233</span></li>
            <li class="mui-table-view-cell">客户姓名<span class="pull-right">233</span></li>
            <li class="mui-table-view-cell">身份证号码<span class="pull-right">36032119971123445X</span></li>
            <li class="mui-table-view-cell">手续费率<span class="pull-right">0.06%</span></li>
            <li class="mui-table-view-cell">服务费率<span class="pull-right">0.6%</span></li>
        </ul>
    </div>
</div>


<!--右下角弹出菜单-->
<div id="bottomPopover" class="mui-popover mui-popover-bottom">
    <div class="mui-popover-arrow"></div>
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" id="linkto"><a href="#">MPOS</a></li>
                <li class="mui-table-view-cell" id="linkto2"><a href="#">传统POS</a></li>
            </ul>
        </div>
    </div>
</div>
<!--<style>
    .copy-text{
        position: absolute;
        top:10px;
        z-index:11111;
    }
</style>-->
<!--<button type="button" class="copy-text mui-btn mui-btn-primary">copy</button>-->
<!--<span id="pass">44444</span>-->
<!--<input type="text" value="777" id="pass">-->
<div class="fixedbtn">
    <a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right"><i class="fa fa-plus fa-fw"></i></a>
</div>
<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script src="../../js/mechant/mechant.js"></script>
<script>
    mui.init();
    // mui('.mui-scroll-wrapper').scroll();
    mui('body').on('shown', '.mui-popover', function(e) {
        console.log('shown', e.detail.id);//detail为当前popover元素
    });
    mui('body').on('hidden', '.mui-popover', function(e) {
        console.log('hidden', e.detail.id);//detail为当前popover元素
    });
    // MPOS
    mui("#bottomPopover").on('tap',"#linkto",function () {
        location.href="mechant_mpos.html";
    })
    // 传统POS
    mui("#bottomPopover").on('tap',"#linkto2",function () {
        location.href="mechant_ctpos.html";
    })

    // 提示
    mui(".mui-row").on('tap',"#pmt",function () {
        mui.alert("列表右滑可对数据进行复制，修改和删除操作")
    })

</script>
</body>
</html>